.box1{
    background-color: #dedede;
    /*盒子模型相关的样式*/
    /*
    box-sizing 样式用于设置元素的盒子模型类型
        + content-box - 标准盒子 - 内容盒子  【默认】
        + border-box - 变异盒子 - 边框盒子
    */
    box-sizing: content-box;
    /*
        标准盒子 - 元素内容的宽度
                  限定内容的宽度
    */
    width: 300px;
    /* 标准盒子 - 元素内容的高度 */
    height: 200px;
    /* 元素内容外边和边框内边的间距 - 内间距*/
    padding: 40px;
    /* 边框的粗细 */
    border: 40px solid black;
    /* 元素的外边和外部区域的间距 - 外间距*/
    margin: 40px;
}
.box2{
    background-color: #dedede;
    /*盒子模型相关的样式*/
    /*
    box-sizing 样式用于设置元素的盒子模型类型
        + content-box - 标准盒子 - 内容盒子  【默认】
        + border-box - 变异盒子 - 边框盒子
    */
    box-sizing: border-box;
    /*
        变异盒子 - 是左右边框 + 左右内间距 + 内容宽度
                  限定内容+内间距+外间距的总宽度
                  当总和大于width时，会以width的值为准开始压缩内容宽度，直达内容宽度为0px停止压缩
    */
    width: 300px;
    /*
        变异盒子 - 是上下边框 + 上下内间距 + 内容高度
                  限定内容+内间距+外间距的总高度
                  当总和大于height时，会以height的值为准开始压缩内容高度，直达内容高度为0px停止压缩
    */
    height: 200px;
    /* 元素内容外边和边框内边的间距 - 内间距 */
    padding: 40px;
    /* 边框的粗细 */
    border: 40px solid black;
    /* 元素的外边和外部区域的间距 - 外间距 */
    margin: 40px;
}
.box3{
    background-color: #dedede;
    background-image: url("../../assets/img/bg.jpg");
    /*盒子模型相关的样式*/
    /*box-sizing: content-box;*/
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    padding: 40px;
    border: 40px solid rgba(0,0,0,0.4);
    margin: 40px;
}
.nav{
    background-color: #dedede;
    /*padding: 20px;*/
    /*border: 10px solid transparent;*/
    margin: 20px;
}

.box4{
    background-color: #dedede;
    /* 元素的宽高设置对于行级元素无效；行级元素的宽高只由内容决定 */
    /*
        如果元素必须设置宽度和高度，需要将元素切换到非行级元素
            + display 改变元素的显示模式
                      inline 设置为行级元素
                      block  设置为块级元素
                      inline-block 设置为行快元素【设置为替换元素】
    */
    /*display: block;*/
    display: inline-block;
    width: 200px;
    height: 100px;
}
.img-box{
    /*
        img 标签属于 替换类型标签 , 替换标签虽然以行级元素存在，但可以设置宽高
        替换标签：标签在页面的显示结果，不是以标签内容决定，而是以标签加载的资源决定
    */
    width: 200px;
    height: 100px;
}

.box5{
    display: inline-block;
    background-color: #dedede;
    font-size: 40px;
    border: 4px solid brown;
    /*
        盒子模型的四边格式设置遵守同样的简化规则 -> 12点顺时针
        对边取值相同时，可以省略最后一位
    */
    /*padding-top: 10px;*/
    /*padding-right: 50px;*/
    /*padding-bottom: 30px;*/
    /*padding-left: 80px;*/
    /*padding: 10px 50px 30px 80px;*/
    /*-------*/
    /*padding: 10px 50px 30px 50px;*/
    /* 右边内间距=左边内间距  左边内间距是最后一位数值设置 - 删除左边内间距 */
    /*padding: 10px 50px 30px;*/
    /*  ------下述不可省略--------  */
    /*padding: 20px 30px 20px 50px;*/
    /*  --------------  */
    /*padding: 20px 50px 20px 50px;*/
    /*padding: 20px 50px;*/
    /*  --------------  */
    /*padding: 50px 50px 50px 50px;*/
    padding: 50px;
}
.box5>span{
    background-color: cornflowerblue;
}
.item{
    background-color: #dedede;
    padding-top: 20px;
    padding-bottom: 20px;
}
.m-box-1{
    border: 1px solid black;
    padding: 20px;
}
.c-box-1{
    background-color: #dedede;
    /*子元素 c-box 的外间距+父元素 m-box 的内间距 才是页面显示的空白大小*/
    margin: 40px;
}

.m-box-2{
    border: 1px solid black;
    /*width: 800px;*/
    height: 300px;
}
.c-box-2{
    background-color: #dedede;
    width: 200px;
    height: 200px;
    /* auto 作为 外间距左右方向取值时,表示自动适配 - 用于块级元素得水平居中 */
    /*margin: 40px auto;*/
    margin: auto;
}
.m-box-3{
    border: 1px solid black;
    text-align: center;
}
.c-box-3{
    background-color: #dedede;
    /*width: 200px;*/
    /*margin: 0 auto;*/
}
.m-box-4{
    /*border: 1px solid black;*/
    /*padding: 10px;*/
    /*overflow: hidden;*/
    background-color: rgba(100, 149, 237, 0.4);
}
.c-box-4{
    background-color: rgba(100, 149, 237, 0.4);
    /* 外间距合并(外间距塌陷) :
        + 上下相邻的非BFC元素的相邻外边距 会合并成一个外边距间距,间距大小区相邻外间距最大值
        + 父子元素之间,如果父元素不是BFC容器,子元素的外边距会在父元的外边距上显示
    */
    margin: 40px;
}
.item-1{
    margin-bottom: 40px;
}
.item-2{
    margin-top: 60px;
}

.border-box{
    /* 边框基本是由 宽度 类型 颜色 */
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: black;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: black;
    border-bottom-width:1px ;
    border-bottom-style:solid ;
    border-bottom-color:black ;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
    /* border-方向 是边框设置参数整合 */
    /*border-top: 1px solid black;*/
    /*border-left: 1px solid black;*/
    /*border-bottom: 1px solid black;*/
    /*border-right: 1px solid black;*/
    /* border 样式的设置是四边的整体定义 */
    /*border: 1px solid black;*/
}
.border-triangle{
    width: 0px;
    height: 0px;
    padding: 0px;
    /* border 的定义会让元素变为 BFC 容器 */
    border: 20px solid transparent;
    /*border-left-color: cornflowerblue;*/
    border-bottom-color: cornflowerblue;
    border-right-color: cornflowerblue;
}
.border-radius{
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    background-color: #4668a4;
    color: white;
    margin-bottom: 10px;
}
.border-radius-1{
    /* 定义边框相交位置的 弧形半径 - 矩形圆角样式 */
    /* 取一个值，表示以圆弧构建圆角 */
    border-radius: 40px;
}
.border-radius-2{
    /* 以 / 取两个值，表示以椭圆弧构建椭圆边角 */
    /*border-radius: 40px / 100px;*/
    border-radius: 100px / 40px;
}
.border-radius-3{
    /*border-radius: 40px 40px 40px 40px;*/
    /*border-radius: 150px 10px 150px 10px;*/
    border-radius: 150px 150px 10px 10px;
}
.border-radius-4{
    /*border-radius: 40px 40px 40px 40px / 10px 10px 10px 10px;*/
    border-radius: 100px 80px 30px 50px / 60px 40px 90px 50px;
}
.border-radius-5{
    /*取值 50% 表示圆弧半径和元素边框一半相等，用于绘制圆弧图形*/
    /*如果元素本身是正方形 - 绘制圆*/
    border-radius: 50%;
}
.border-radius-6{
    height: 150px;
    line-height: 150px;
    /*取值 50% 表示圆弧半径和元素边框一半相等，用于绘制圆弧图形*/
    /*如果元素本身是正方形 - 绘制圆*/
    border-radius: 50%;
}

.border-radius-7{
    /*height: 40px;*/
    height: auto;
    padding: 10px;
    line-height: 40px;
    /*border-radius: 20px / 50%;*/
    /*当定义的半径远大于元素宽度和高度时，不满足切角操作，会默认分取宽高最小值的一半*/
    border-radius: 1000px;
}
.border-img{
    width: 300px;
    height: 400px;
    border: 100px solid transparent;
    /*border: 0px solid transparent;*/
    border-image: url("../../assets/img/border.png");
    border-image-slice: 50 50 50 130;
    border-width: 50px 50px 50px 130px;
}